<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美食订单</title>
    <script type="text/javascript" src="/js/jquery-2.1.4.js" ></script>
    <script type="text/javascript" src="/js/vue.js" ></script>
    <!-- 引入样式 -->
    <link type="text/css" rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="/element-ui/lib/index.js"></script>
    <style>
        .fenye{
            width: 500px;
            height: 100px;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
        }
        .search{
            width: 200px;
        }
        .header{
            width: 100%;
            height: 50px;
            margin: 0 auto;
            text-align: center;
            padding-bottom: 70px;
        }
    </style>
</head>
<body>
    <div id="div">
        <div class="header">
            <el-input class="search" placeholder="请输入城市名："  clearable suffix-icon="el-icon-search" v-model="cityName"></el-input>
            <el-input class="search" placeholder="请输入营地名："  clearable suffix-icon="el-icon-search" v-model="campname"></el-input>
            <el-input class="search" placeholder="请输入美食名："  clearable suffix-icon="el-icon-search" v-model="foodName"></el-input><br><br>
             <!--  搜索的输入框      -->
            请输入菜品的最大价格: <el-input class="search" placeholder="请输入菜品的最大价格："  clearable suffix-icon="el-icon-search" v-model="maxPrice"></el-input>
            <!--  搜索的输入框      -->
            请输入菜品的最小价格: <el-input class="search" placeholder="请输入菜品的最小价格："  clearable suffix-icon="el-icon-search" v-model="minPrice"></el-input>

            <el-button type="primary" @click="selectFoodOrder()">查询</el-button>
        </div>

        <el-table
                :data="tableData"
                style="width: 100%"
                :default-sort = "{prop: 'foodOrderId', order: 'descending'}">
            <el-table-column
                    prop="foodOrderId"
                    label="美食订单编号"
                    sortable
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="foodName"
                    label="美食名"
                    sortable
            >
            </el-table-column>
            <el-table-column  :show-overflow-tooltip="true"
                              prop="campname"
                    label="营地名"
                    sortable
                    >
            </el-table-column>
            <el-table-column
                    prop="cityName"
                    label="城市名">
            </el-table-column>
            <el-table-column
                    prop="number"
                    label="数量">
            </el-table-column>
            <el-table-column  format="yyyy-MM-dd HH:mm:ss"
                              prop="orderTime"
                    label="订单时间" width="160" >
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="单价">
            </el-table-column>

            <el-table-column
                    prop="total"
                    sortable
                    label="总计">
            </el-table-column>
            <el-table-column
                    prop="license"
                    label="车牌号">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="订单状态">
            </el-table-column>
        </el-table>
        <!--分页-->
        <div class="fenye">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageIndex"
                    :page-sizes="[2, 4, 6, 8]"
                    :page-size="page.number"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.dataCount">
            </el-pagination>
        </div>
    </div>

    <script type="text/javascript">
        new Vue({
            el:"#div",
            data:{
                cityName:'',
                campname:'',
                foodName:'',
                minPrice:'',
                maxPrice:'',
                //定义集合存储营地信息
                tableData:[],
                page: {
                    pageIndex:1,
                    number:2,
                    pageCount:null,
                    dataCount:null
                }
            },
            created:function(){
                this.selectFoodOrder();
            },
            methods:{
                //查询所有订单
                selectFoodOrder(){
                    var _this = this;
                    $.ajax({
                        url: "/selectFoodOrder",
                        type: "get",
                        data: {
                            "index":_this.page.pageIndex,
                            "number":_this.page.number,
                            "cityName":_this.cityName,
                            "campname":_this.campname,
                            "foodName":_this.foodName,
                            "minPrice":_this.minPrice,
                            "maxPrice":_this.maxPrice
                        },
                        dataType: "json",
                        success: function(data) {
                            _this.tableData=data.list;
                            console.log(data.list);
                            for (var i=0;i<_this.tableData.length;i++){
                                 if(_this.tableData[i].status==1){
                                     _this.tableData[i].status='已预约';
                                     continue;
                                 }
                                 if(_this.tableData[i].status==2){
                                     _this.tableData[i].status='已支付';
                                     continue;
                                 }
                                 if(_this.tableData[i].status==3){
                                    _this.tableData[i].status='未送达';
                                     continue;
                                 }
                                if(_this.tableData[i].status==4){
                                    _this.tableData[i].status='已送达';
                                    continue;
                                }
                                if(_this.tableData[i].status==0){
                                    _this.tableData[i].status='已完成';
                                    continue;
                                }
                            }
                            _this.page.pageIndex = data.obj.pageIndex;
                            _this.page.number = data.obj.number;
                            _this.page.pageCount = data.obj.pageCount;
                            _this.page.dataCount = data.obj.count;
                        },
                        error: function(data) {
                            alert(data.responseJSON.message);
                        }
                    });
                },
                handleEdit:function(index, row) {
                    this.updateCarInfo = row;
                    this.updateDialogVisible = true;
                },
                handleDelete:function(index, row) {
                    this.open(row);
                },
                //分页
                handleSizeChange(val) {
                    this.page.number = val;
                    this.selectFoodOrder();
                },
                handleCurrentChange(val) {
                    this.page.pageIndex = val;
                    this.selectFoodOrder();
                }

            }
        })
    </script>
</body>
</html>